

require(['config'], () => {
    require(['jquery','header','footer'], () => {
     
  /* 动态渲染购物车 */
function showCartList() {
    /* localStorage中获取商品列表 */
    let productList = JSON.parse(localStorage.getItem('XMYX-CART-LIST')) || []
    let cartTitle = `
                    <table>
                    <tr class="title">
                      <th><input type="checkbox" name="stateall" ${stateAll?'checked':''}>全选</th>
                      <th>商品</th>
                      <th>单价</th>
                      <th>数量</th>
                      <th>小计</th>
                      <th>操作</th>
                    </tr>
                    `
    let cartList = productList.map(item => {
      return `<tr>
                <td>
                <input type="checkbox" name="state" ${item.state?'checked':''} data-index='${item.id}'>
                  <img src="${item.url}" alt="${item.name}">
                </td>
                <td class="produc-name">${item.name}</td>
                <td>￥${item.price}</td>
                <td>
                  <input type="button" value="-" name="minus" data-index='${item.id}'  ${item.num == 1 ?'disabled':''}/>
                  <input type="text" value='${item.num}' name="amount" />
                  <input type="button" value="+" name="plus" data-index='${item.id}'/>
                </td>
                <td class="price">￥${ (item.num * item.price).toFixed(2)}</td>
                <td>
                  <span class='del' data-index='${item.id}'>删除<span>
                </td> 
              </tr>`
    }).join('')
    cartTitle += cartList + `</table>`
    const tableEle = document.querySelector('.productList')
    tableEle.innerHTML = cartTitle
  }
  /* 购物车操作 */
  /* 购物车相关节点 */
  let stateAll = false //定义选框的值
  const cartEle = document.querySelector('#cart-list .cart')
  const spanEle = document.querySelector('.all-price')
  const allNum = document.querySelector('.all-product-num')
  
  function shoppingCart() {
    cartEle.addEventListener('click', e => {
      e = e || window.event //事件对象
      let target = e.target || e.srcElement //事件目标对象
      /* 加 */
      if (target.getAttribute('value') == '+') {
        let id = target.getAttribute('data-index')
        //将保存在localStorage中的productList字符串转成对象
        let productList = JSON.parse(localStorage.getItem('XMYX-CART-LIST')) || []
        productList.find(item => item.id == id).num++
        localStorage.setItem('XMYX-CART-LIST', JSON.stringify(productList))
        /* 计算总价 */
        totalPrice()
        allProduct()
        /* 动态渲染 */
        showCartList()
      }
      /* 减 */
      if (target.getAttribute('value') == '-') {
        let id = target.getAttribute('data-index')
        //将保存在localStorage中的productList字符串转成对象
        let productList = JSON.parse(localStorage.getItem('XMYX-CART-LIST')) || []
        productList.find(item => item.id == id).num--
        localStorage.setItem('XMYX-CART-LIST', JSON.stringify(productList))
        /* 计算总价 */
        totalPrice()
        allProduct()
        /* 动态渲染 */
        showCartList()
      }
      //删除
      if (target.getAttribute('class') == 'del') {
        // 获取id
        let id = target.getAttribute('data-index')
        //将保存在localStorage中的productList字符串转成对象
        let productList = JSON.parse(localStorage.getItem('XMYX-CART-LIST')) || []
        //遍历数组取出索引号
        let index = productList.findIndex(item => item.id == id)
        productList.splice(index, 1)
        localStorage.setItem('XMYX-CART-LIST', JSON.stringify(productList))
        /* 计算总价 */
        totalPrice()
        allProduct()
        /* 动态渲染 */
        showCartList()
      }
      //全选
      if (target.getAttribute('name') == 'stateall') {
        stateAll = !stateAll
        //将保存在localStorage中的productList字符串转成对象
        let productList = JSON.parse(localStorage.getItem('XMYX-CART-LIST')) || []
        //循环遍历数组让所有商品的选框被选中
        productList.forEach(item => item.state = stateAll)
        localStorage.setItem('XMYX-CART-LIST', JSON.stringify(productList))
        /* 计算总价 */
        totalPrice()
        allProduct()
        /* 动态渲染 */
        showCartList()
  
      }
      //单选
      if (target.getAttribute('name') == 'state') {
        let id = target.getAttribute('data-index')
        //将保存在localStorage中的productList字符串转成对象
        let productList = JSON.parse(localStorage.getItem('XMYX-CART-LIST')) || []
        let prodct = productList.find(item => item.id == id)
        prodct.state = !prodct.state
        stateAll = productList.every(item => item.state == true)
        localStorage.setItem('XMYX-CART-LIST', JSON.stringify(productList))
        /* 计算总价 */
        totalPrice()
        allProduct()
        /* 动态渲染 */
        showCartList()
      }
      /* 结算 */
      if (target.getAttribute('class') == 'balance') {
        alert('结算成功')
        spanEle.innerHTML = '￥0.00'
        allNum.innerHTML = '0'
      }
    })
  }
  //计算所有总价
  function totalPrice() {
    //将保存在localStorage中的cartList字符串转成对象
    let productList = JSON.parse(localStorage.getItem('XMYX-CART-LIST')) || []
    let sum = productList.reduce((s, item) => s + (item.state ? Number((item.num * item.price).toFixed(2)) : 0), 0)
    spanEle.innerHTML = `￥${sum.toFixed(2)}`
    localStorage.setItem('XMYX-CART-LIST', JSON.stringify(productList))
  }
  /* 全部商品 */
  function allProduct() {
    //将保存在localStorage中的cartList字符串转成对象
    let productList = JSON.parse(localStorage.getItem('XMYX-CART-LIST')) || []
    let sum = productList.reduce((s, item) => s + (item.state ? item.num : 0), 0)
    allNum.innerHTML = sum
    localStorage.setItem('XMYX-CART-LIST', JSON.stringify(productList))
  }
  /* 动态渲染 */
  showCartList()
  /* 购物车操作 */
  shoppingCart()
  
  
    })
  })
  
  
  
  
  
  